{% load static %}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>李坤洪编写程序</title>
    <link rel="shortcut icon" href="{% static 'stark/imgs/luffy-study-logo.png' %}">
    <link rel="stylesheet" href="{% static 'stark/plugins/bootstrap/bootstrap/css/bootstrap.css' %}">
    <link rel="stylesheet" href="{% static 'stark/plugins/font-awesome/css/font-awesome.css' %}">
    <link rel="stylesheet" href="{% static 'stark/css/commons.css' %}">
    <link rel="stylesheet" href="{% static 'stark/css/nav.css' %}">
    <link rel="stylesheet" href="{% static 'stark/css/search-group.css' %}">
    <style>
        /* 补充响应式菜单样式 */
        .mobile-menu-btn {
            display: none;
            position: fixed;
            top: 15px;
            left: 15px;
            z-index: 1050;
            background: #fff;
            border: 1px solid #ddd;
            border-radius: 4px;
            padding: 8px 12px;
        }

        @media (max-width: 767px) {
            .mobile-menu-btn {
                display: block;
            }

            .pg-body .left-menu {
                position: fixed;
                top: 0;
                left: -250px;
                height: 100%;
                width: 250px;
                z-index: 1040;
                transition: left 0.3s ease;
                background: #fff;
                box-shadow: 2px 0 5px rgba(0,0,0,0.1);
            }

            .pg-body .left-menu.active {
                left: 0;
            }

            .menu-overlay {
                display: none;
                position: fixed;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background: rgba(0,0,0,0.5);
                z-index: 1030;
            }

            .menu-overlay.active {
                display: block;
            }
        }
    </style>
    {% block css %}{% endblock %}
</head>

<body>
    <!-- 移动端菜单按钮 -->
    <button class="mobile-menu-btn visible-xs" id="mobileMenuBtn">
        <i class="fa fa-bars" aria-hidden="true"></i>
    </button>

    <!-- 遮罩层 -->
    <div class="menu-overlay" id="menuOverlay"></div>

    <div class="pg-header">
        <div class="nav navbar navbar-default">
            <div class="container">
                <!-- 顶部导航的折叠按钮（针对顶部左侧菜单） -->
                <button type="button" class="navbar-toggle" data-toggle="collapse"
                        data-target="#top-left-menu-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <div class="logo-area left">
                    <a href="#">
                        <img class="logo" src="{% static 'stark/imgs/logo.svg' %}">
                        <span style="font-size: 18px;">李坤洪编写程序</span>
                    </a>
                </div>
                <!-- 顶部左侧菜单 -->
                <div class="collapse navbar-collapse" id="top-left-menu-collapse">
                    <div class="left-menu left">
                        <a class="menu-item">资产管理</a>
                        <a class="menu-item">用户信息</a>
                        <a class="menu-item">路飞管理</a>
                        <div class="menu-item">
                            <span>使用说明</span>
                            <i class="fa fa-caret-down" aria-hidden="true"></i>
                            <div class="more-info">
                                <a href="#" class="more-item">管他什么菜单</a>
                                <a href="#" class="more-item">实在是编不了</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="right-menu right clearfix">
                    <div class="user-info right">
                        <a href="#" class="avatar">
                            <img class="img-circle" src="{% static 'stark/imgs/default.png' %}">
                        </a>
                        <div class="more-info">
                            <a href="#" class="more-item">个人信息</a>
                            <a href="#" class="more-item">注销</a>
                        </div>
                    </div>
                    <a class="user-menu right">
                        消息
                        <i class="fa fa-commenting-o" aria-hidden="true"></i>
                        <span class="badge bg-success">2</span>
                    </a>
                    <a class="user-menu right">
                        通知
                        <i class="fa fa-envelope-o" aria-hidden="true"></i>
                        <span class="badge bg-success">2</span>
                    </a>
                    <a class="user-menu right">
                        任务
                        <i class="fa fa-bell-o" aria-hidden="true"></i>
                        <span class="badge bg-danger">4</span>
                    </a>
                </div>
            </div>
        </div>
    </div>

    <div class="pg-body">
        <!-- 左侧主体菜单 -->
        <div class="left-menu hidden-xs" id="mainLeftMenu">
            <div class="menu-body">
                <!-- 这里放左侧菜单具体内容 -->
                <div class="menu-group">
                    <h4>系统管理</h4>
                    <ul>
                        <li><a href="#"><i class="fa fa-cog"></i> 系统设置</a></li>
                        <li><a href="#"><i class="fa fa-users"></i> 用户管理</a></li>
                        <li><a href="#"><i class="fa fa-shield"></i> 权限管理</a></li>
                    </ul>
                </div>
                <div class="menu-group">
                    <h4>内容管理</h4>
                    <ul>
                        <li><a href="#"><i class="fa fa-file-text"></i> 文章管理</a></li>
                        <li><a href="#"><i class="fa fa-image"></i> 图片管理</a></li>
                    </ul>
                </div>
            </div>
        </div>

        <div class="right-body">
            <div>
                <!-- 右侧内容头部 -->
            </div>
            {% block content %} {% endblock %}
        </div>
    </div>


    <script src="{% static 'stark/js/jquery-3.3.1.min.js' %}"></script>
    <script src="{% static 'stark/plugins/bootstrap/js/bootstrap.js' %}"></script>
    <script>
        // 移动端左侧菜单控制
        $(function() {
            var $menuBtn = $('#mobileMenuBtn');
            var $leftMenu = $('#mainLeftMenu');
            var $overlay = $('#menuOverlay');

            // 点击菜单按钮
            $menuBtn.on('click', function() {
                $leftMenu.toggleClass('active');
                $overlay.toggleClass('active');
            });

            // 点击遮罩层关闭菜单
            $overlay.on('click', function() {
                $leftMenu.removeClass('active');
                $overlay.removeClass('active');
            });

            // 窗口大小改变时处理
            $(window).on('resize', function() {
                if ($(window).width() > 767) {
                    $leftMenu.removeClass('active');
                    $overlay.removeClass('active');
                }
            });
        });
    </script>
    {% block js %} {% endblock %}

</body>

</html>

